﻿@using Microsoft.AspNetCore.Html
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.Extensions.Options
@using Volo.Abp.GlobalFeatures
@using Volo.Abp.Users
@using Volo.CmsKit.Comments;
@using Volo.CmsKit.GlobalFeatures
@using Volo.CmsKit.Localization
@using Volo.CmsKit.Public.Comments
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection
@using Volo.CmsKit.Web
@inject ICurrentUser CurrentUser
@inject IOptionsSnapshot<CmsKitUiOptions> cmsKitUiOptions;
@inject IOptions<CmsKitCommentOptions> CmsKitCommentOptions
@inject IHtmlLocalizer<CmsKitResource> L
@model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Commenting.CommentingViewComponent

@{
    Func<dynamic, IHtmlContent> GetCommentTitle(CmsUserDto author, DateTime creationTime) =>
    @<span>
        <i class="far fa-comment-alt me-2"></i>
        @((string.IsNullOrWhiteSpace(author.Name)
    ? author.UserName
    : author.Name + " " + author.Surname).Trim())
        <small class="text-muted float-end" style="opacity: .5; font-size: 14px">@creationTime.ToString()</small>
    </span>;
}
@{
    Func<dynamic, IHtmlContent> GetCommentArea(Guid? repliedCommentId, bool cancelButton = false) =>
    @<div class="cms-comment-form-area bg-light card p-3 mx-0  @(repliedCommentId.HasValue ? "my-3" : "mt-3")"
              data-reply-id="@(repliedCommentId?.ToString() ?? "")"
              style="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? "" : "display:none")">
        <form class="cms-comment-form">
            <input hidden value="@(Guid.NewGuid().ToString("N"))" name="idempotencyToken" />
            <input hidden value="@(repliedCommentId?.ToString() ?? "")" name="repliedCommentId" />
            <div class="row">
                <div class="col">
                    <div class="mb-3 m-0">
                        <textarea class="form-control" name="commentText" placeholder="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? L["YourComment"] : L["YourReply"])..." rows="3"></textarea>
                    </div>
                </div>
                <div class="mt-0">
                    <small class="text-muted float-end">@L["MarkdownSupported"]</small>
                </div>

                @if (CmsKitCommentOptions.Value.IsRecaptchaEnabled)
            {
                <div class="volo-captcha">
                    <label class="form-label" for="Input_Captcha">@L["CaptchaCode"]</label>
                    <div class="d-flex">
                        <div class="bd-highlight">
                            <img src="@Model.Input.CaptchaImageBase64" />
                        </div>
                        <div class="flex-grow-1 bd-highlight">
                            <abp-input type="number" asp-for="@Model.Input.Captcha" suppress-label="true" class="d-inline-block" autocomplete="off" />
                        </div>
                        <abp-input asp-for="@Model.CaptchaId" value="@Model.CaptchaOutput.Id" />
                    </div>
                </div>
            }
                <div class="col-auto">
                    <div class="text-end">
                        <abp-button id="submit-button" type="submit" button-type="Primary">
                            <i class="fa fa-comment-alt me-1"></i> @L["Send"]
                        </abp-button>
                        @if (cancelButton)
                    {
                        <abp-button type="button" button-type="Light" class="reply-cancel-button" data-reply-id="@(repliedCommentId?.ToString() ?? "")">
                            <i class="fa fa-times me-1"></i> @L["Cancel"]
                        </abp-button>
                    }
                    </div>
                </div>
            </div>
        </form>
    </div>;
}
@{
    Func<dynamic, IHtmlContent> GetCommentContentArea(Guid id, string text) =>
    @<div class="cms-comment-content-area" data-id="@id.ToString()">
        <p class="m-0">
            @Html.Raw(text)
        </p>
    </div>;
}
@{
    Func<dynamic, IHtmlContent> GetCommentActionArea(Guid id, Guid authorId, bool isReply) =>
    @<div class="inner-comment-buttons text-start">
        @if (!isReply)
    {
        @if (CurrentUser.IsAuthenticated)
    {
        <a href="#" class="comment-links comment-reply-link btn btn-sm  shadow-sm  btn-primary" data-reply-id="@id.ToString()" id="@($"cms-comment_{Model.Input.EntityType}_{Model.Input.EntityId}_{id}_link")">
            <i class="fa fa-reply mr -1"></i> @L["Reply"]
        </a>

        <a href="#" class="comment-links comment-delete-link btn btn-sm shadow-sm btn-link text-muted bg-white " data-author-id="@authorId.ToString()" data-id="@id.ToString()">
            <i class="fa fa-trash  mr -1"></i> @L["Delete"]
        </a>
    }
    else
    {
        <a href="@(Model.Input.LoginUrl + "_" + id)" class="btn btn-sm btn-light shadow-sm">
            @L["LoginToReply"]
        </a>
    }
    }


        @if (authorId == CurrentUser.Id)
    {
        <a href="#" class="comment-links comment-edit-link  btn btn-sm shadow-sm  btn-link text-muted bg-white" data-id="@id.ToString()">
            <i class="fa fa-pencil  mr -1 "></i> @L["Edit"]
        </a>
    }
    </div>;
}
@{
    Func<dynamic, IHtmlContent> GetEditArea(Guid id, string text, string concurrencyStamp) =>
    @<div class="cms-comment-edit-area" id="@($"cms-comment_{Model.Input.EntityType}_{Model.Input.EntityId}_{id}")" data-id="@id.ToString()" style="display:none">
        <div class="card bg-light p-3 mx-0 mt-3">
            <form class="cms-comment-update-form">
                <input hidden value="@id.ToString()" name="id" />
                <div class="row">
                    <div class="col">
                        <div class="mb-3 m-0">
                            <textarea class="form-control" name="commentText" rows="3">@text</textarea>
                            <input name="commentConcurrencyStamp" value="@concurrencyStamp" type="hidden" />
                        </div>
                    </div>
                    <div class="mt-0">
                        <small class="text-muted float-end">@L["MarkdownSupported"]</small>
                    </div>

                    @if (CmsKitCommentOptions.Value.IsRecaptchaEnabled)
                {
                var output = await Model.GenerateCaptchaAsync();

                    <div class="volo-captcha">
                        <label class="form-label" for="Input_Captcha_@output.Id">@L["CaptchaCode"]</label>
                        <div class="d-flex">
                            <div class="bd-highlight">
                                <img src="@Model.GetCaptchaImageBase64(output.ImageBytes)" />
                            </div>
                            <div class="flex-grow-1 bd-highlight">
                                <abp-input id="Input_Captcha_@output.Id" type="number" asp-for="@Model.Input.Captcha" suppress-label="true" class="d-inline-block" autocomplete="off" />
                            </div>
                            <abp-input asp-for="@Model.CaptchaId" value="@output.Id" />
                        </div>
                    </div>
                }
                    <div class="col-auto">
                        <div class="text-end">
                            <abp-button type="submit" button-type="Primary" size="Block"> @L["Update"] </abp-button>
                            <abp-button type="button" button-type="Light" size="Block_Small" class="comment-edit-cancel-button" data-id="@id.ToString()"><i class="fa fa-times me-1"></i>  @L["Cancel"] </abp-button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>;
}

<div class="cms-comment-area mb-5" data-entity-type="@Model.Input.EntityType" data-entity-id="@Model.Input.EntityId">
    @if (CurrentUser.IsAuthenticated)
    {
        <div id="@($"cms-comment_{Model.Input.EntityType}_{Model.Input.EntityId}")">
            @GetCommentArea(null).Invoke(null)
        </div>
    }
    else if (!string.IsNullOrWhiteSpace(Model.Input.LoginUrl))
    {
        <div class="text-end">
            <a href="@Model.Input.LoginUrl" class="btn btn-primary"> @L["LoginToAddComment"]</a>
        </div>
    }
    @foreach (var comment in Model.Input.Comments)
    {
        <div class="comment" id="comment-@comment.Id.ToString()">
            <div class="card p-3 mx-0 my-3">
                <h5>
                    @GetCommentTitle(comment.Author, comment.CreationTime).Invoke(null)
                </h5>

                @GetCommentContentArea(comment.Id, comment.Text).Invoke(null)

                @if (!Model.Input.IsReadOnly)
                {
                    <div class="row mt-2">
                        <div class="col">
                            <div class="my-2 ">
                                @GetCommentActionArea(comment.Id, comment.Author.Id, false).Invoke(null)
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="reaction-in-comment">
                                @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
                                {
                                    @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = comment.Id.ToString() })
                                }
                            </div>
                        </div>
                    </div>
                    @GetEditArea(comment.Id, Model.Input.RawCommentTexts[comment.Id], comment.ConcurrencyStamp).Invoke(null)
                }

                @if (comment.Replies.Any())
                {
                    @foreach (var reply in comment.Replies)
                    {
                        <div class="comment-container card p-3 mx-0 mt-3">
                            <div class="comment">
                                <h5>
                                    @GetCommentTitle(reply.Author, reply.CreationTime).Invoke(null)
                                </h5>

                                @GetCommentContentArea(reply.Id, reply.Text).Invoke(null)

                                @if (!Model.Input.IsReadOnly)
                                {
                                    <div class="row mt-2">
                                        <div class="col">
                                            <div class="my-2 ">
                                                @GetCommentActionArea(reply.Id, reply.Author.Id, true).Invoke(null)
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="reaction-in-comment">
                                                @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
                                                {
                                                    @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = reply.Id.ToString() })
                                                }
                                            </div>
                                        </div>
                                    </div>

                                    @GetEditArea(reply.Id, Model.Input.RawCommentTexts[reply.Id], reply.ConcurrencyStamp).Invoke(null)
                                }
                            </div>
                        </div>
                    }
                    @if (comment.Replies.Count >= 3)
                    {
                        <div class=" mt-2">
                            @if (CurrentUser.IsAuthenticated)
                            {
                                <a href="#" class="comment-links  comment-reply-link btn btn-primary btn-sm" data-reply-id="@comment.Id.ToString()">
                                    <i class="fa fa-reply me-1"></i> @L["Reply"]
                                </a>
                            }
                            else
                            {
                                <a href="@(Model.Input.LoginUrl + "_" + comment.Id)" class="btn btn-sm btn-light shadow-sm"> @L["LoginToReply"]</a>
                            }
                        </div>
                    }
                }
                @if (CurrentUser.IsAuthenticated)
                {
                    @GetCommentArea(comment.Id, true).Invoke(null)
                }

            </div>
        </div>
    }
</div>

